<!DOCTYPE html>
<html lang="en">

	<head>
		<meta charset="UTF-8">
		<meta name="viewport" content="width=device-width, initial-scale=1.0">
		<title>5725宿舍生活网站-关于我们</title>
		<style>
			/* 全局样式 */
			body {
				font-family: '微软雅黑', sans-serif;
				margin: 0;
				padding: 0;
				background-color: #f4f4f4;
				color: #333;
			}

			/* 头部样式 */
			header {
				background-color: #00f7ff;
				padding: 10px 20px;
				display: flex;
				justify-content: space-between;
				align-items: center;
			}

			header .logo {
				font-family: '手写体', cursive;
				font-size: 24px;
				color: #fff;
			}

			nav ul {
				list-style: none;
				margin: 0;
				padding: 0;
				display: flex;
			}

			nav ul li {
				margin-left: 20px;
			}

			nav ul li a {
				text-decoration: none;
				color: #fff;
				font-size: 18px;
			}

			/* Banner样式 */
			.banner .slider {
				display: flex;
				overflow: hidden;
			}

			.banner .slider img {
				width: 100%;
				height: auto;
			}

			/* 主要内容区域样式 */
			.main-content {
				padding: 20px;
			}

			.main-content h2 {
				font-family: '卡通字体', cursive;
				color: #333;
			}

			.gallery {
				display: flex;
				gap: 10px;
			}

			.gallery img {
				width: 48%;
				height: auto;
			}

			/* 底部样式 */
			footer {
				background-color: #333;
				color: #fff;
				text-align: center;
				padding: 10px 0;
				margin-top: 20px;
			}

			/* 新增互动功能样式 */
			.interaction-section {
				margin: 20px 0;
				padding: 20px;
				background-color: white;
				border-radius: 8px;
				box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
			}

			.vote-options {
				display: flex;
				gap: 15px;
				margin: 15px 0;
				flex-wrap: wrap;
			}

			.message-board {
				margin-top: 20px;
			}

			.message-item {
				border-bottom: 1px solid #eee;
				padding: 15px;
				margin: 10px 0;
				background-color: #fff;
				border-radius: 5px;
			}

			.message-author {
				color: #ffa500;
				font-weight: bold;
				margin-bottom: 5px;
			}

			.results-bar {
				height: 20px;
				background-color: #eee;
				border-radius: 10px;
				margin: 10px 0;
				overflow: hidden;
			}

			.results-fill {
				height: 100%;
				background-color: #ffa500;
				transition: width 0.3s ease;
			}

			#messageForm {
				display: flex;
				flex-direction: column;
				gap: 10px;
				max-width: 600px;
			}

			#author,
			#message {
				padding: 10px;
				border: 1px solid #ddd;
				border-radius: 4px;
				font-size: 16px;
			}

			#message {
				height: 100px;
				resize: vertical;
			}

			button {
				background-color: #ffa500;
				color: white;
				border: none;
				padding: 10px 20px;
				border-radius: 5px;
				cursor: pointer;
				font-size: 16px;
				transition: background-color 0.3s;
			}

			button:hover {
				background-color: #ff8c00;
			}

			/* 宿舍介绍部分样式 */
			.dormitory-intro {
				padding: 20px;
			}

			.dormitory-intro h1 {
				text-align: center;
				color: #333;
			}

			.dormitory-intro h2 {
				color: #555;
			}

			.dormitory-intro ul {
				list-style-type: none;
				padding: 0;
			}

			.dormitory-intro li {
				margin-bottom: 10px;
			}

			.dormitory-intro .member {
				border: 1px solid #ccc;
				padding: 10px;
				margin-bottom: 10px;
				background-color: #fff;
			}

			.dormitory-intro .duty-table {
				border-collapse: collapse;
				width: 100%;
			}

			.dormitory-intro .duty-table th,
			.dormitory-intro .duty-table td {
				border: 1px solid #ccc;
				padding: 8px;
				text-align: center;
			}

			.dormitory-intro .duty-table th {
				background-color: #f0f0f0;
			}

			.dormitory-intro .convention {
				margin-top: 20px;
			}

			.dormitory-intro .activity {
				margin-top: 20px;
			}
			img{
				width: 100px;
				height: auto;
			}
		</style>
	</head>

	<body>
		
		<header>
			<div class="logo">5725宿舍生活网站-关于我们</div>
			<nav>
				<ul>
                <li><a href="sy.html">首页</a></li>
                <li><a href="ssjs.html">宿舍介绍</a></li>
                <li><a href="sssh.html">宿舍生活</a></li>
                <li><a href="gywm.html">关于我们</a></li>
				</ul>
			</nav>
		</header>
		<!-- <div class="banner">
			<div class="slider">
				<img src="https://dummyimage.com/1200x400/000/fff" alt="宿舍生活图片">
			</div>
		</div>
		<div class="main-content">
			<h2>宿舍风采展示</h2>
			<div class="gallery">
				<img src="https://dummyimage.com/600x400/000/fff" alt="宿舍内部图片">
				<img src="https://dummyimage.com/600x400/000/fff" alt="宿舍活动图片">
			</div> -->
		</div>
		<div class="dormitory-intro">
			<h1>宿舍人士介绍</h1>

			<h2>宿舍成员</h2>
			<div class="member">
				<p>成员1：卢传健（寝室长）</p>
				<img src="20200421114021_QuSEH.jpeg" alt="" />
				<p>专业：软件技术</p>
				<p>兴趣爱好：篮球、编程、阅读</p>
				<p>个性签名：“代码改变世界，篮球点燃激情。”</p>
				<p>职位：寝室长</p>
			</div>
			<div class="member">
				<p>成员2：王平帅</p>
				<img src="20200919010610_VxSzh.jpeg" alt="" />
				<p>专业：软件技术</p>
				<p>兴趣爱好：编程、音乐、旅行</p>
				<p>个性签名：“木叶飘舞之处，火亦生生不息。”</p>
			</div>
			<div class="member">
				<p>成员3：吴淑佳</p>
				<img src="20200627070356_uHEEy.jpeg" alt="" />
				<p>专业：软件技术</p>
				<p>兴趣爱好：时尚、摄影、健身</p>
				<p>个性签名：“时尚是我的态度，摄影是我的热爱。”</p>
			</div>
			<div class="member">
				<p>成员4：兰皓</p>
				<img src="u=209142130,253398149&fm=253&gp=0.jpg" alt="" />
				<p>专业：软件技术</p>
				<p>兴趣爱好：篮球、户外运动</p>
				<p>个性签名：“hlks”</p>
			</div>
			<div class="member">
				<p>成员5：谭江茂</p>
				<img src="20200919010610_aGUUS.jpeg" alt="" />
				<p>专业：软件技术</p>
				<p>兴趣爱好：阅读、写作、书法</p>
				<p>个性签名：“文字是我的世界，书法是我的修行。”</p>
			</div>
			<div class="member">
				<p>成员6：黄以坤</p>
				<img src="20200603020935_ecrqk.jpg" alt="" />
				<p>专业：软件技术</p>
				<p>兴趣爱好：吉他、唱歌、旅行</p>
				<p>个性签名：“音乐是我的生命，旅行是我的自由。”</p>
			</div>
			
			<h2>宿舍值日表</h2>
			<table class="duty-table">
				<tr>
					<th>周一</th>
					<th>周二</th>
					<th>周三</th>
					<th>周四</th>
					<th>周五</th>
					<th>周六</th>
					<th>周日</th>
				</tr>
				<tr>
					<td>卢传健</td>
					<td>王平帅</td>
					<td>吴淑佳</td>
					<td>兰皓</td>
					<td>谭江茂</td>
					<td>黄以坤</td>
					<td>自由活动或集体活动</td>
				</tr>
			</table>

			<h2 class="convention">宿舍公约</h2>
			<ul>
				<li>作息时间：晚上11点熄灯，早上7点起床。</li>
				<li>卫生值日：每人轮流打扫卫生，保持宿舍整洁。</li>
				<li>用电安全：不使用大功率电器，注意用电安全。</li>
			</ul>

			<h2 class="activity">宿舍活动</h2>
			<ul>
				<li>每月一次的宿舍聚餐：大家轮流做饭，享受美食和欢乐时光。</li>
				<li>每学期一次的宿舍旅游：选择一个有趣的地方，一起探索和放松。</li>
			</ul>
		</div>
	
	
	
	
	
	
		<!-- 投票功能 -->
		<div class="interaction-section">
		    <h2>本周活动投票</h2>
		    <div class="vote-options">
		        <label>
		            <input type="radio" name="vote" value="聚餐"> 周末聚餐
		        </label>
		        <label>
		            <input type="radio" name="vote" value="电影"> 电影之夜
		        </label>
		        <label>
		            <input type="radio" name="vote" value="游戏"> 桌游大赛
		        </label>
		    </div>
		    <button onclick="submitVote()">立即投票</button>
		    <div id="voteResults"></div>
		</div>
		
		<!-- 留言板功能 -->
		<div class="interaction-section message-board">
		    <h2>留言板</h2>
		    <form id="messageForm" onsubmit="return submitMessage(event)">
		        <input type="text" id="author" placeholder="你的昵称（必填）" required>
		        <textarea id="message" placeholder="留下你的祝福或建议...（必填）" required></textarea>
		        <button type="submit">发布留言</button>
		    </form>
		    <div id="messagesContainer"></div>
		</div>
		
		
		
		
		
		<footer>
			&copy; 2025 大学生宿舍生活网站 版权所有
		</footer>
		
		
		
	</body>
	<script>
		
		
		
		
		
		// 初始化本地存储
		let votes = JSON.parse(localStorage.getItem('votes')) || { 聚餐: 0, 电影: 0, 游戏: 0 };
		let messages = JSON.parse(localStorage.getItem('messages')) || [];
		
		// 投票功能
		function submitVote() {
		    const selected = document.querySelector('input[name="vote"]:checked');
		    if (!selected) return alert('请先选择投票选项！');
		    
		    votes[selected.value]++;
		    localStorage.setItem('votes', JSON.stringify(votes));
		    updateResults();
		}
		
		function updateResults() {
		    const total = Object.values(votes).reduce((a,b) => a+b, 0);
		    let html = '';
		    
		    Object.entries(votes).forEach(([option, count]) => {
		        const percent = total ? (count/total*100).toFixed(1) : 0;
		        html += `
		            <div>${option}: ${count} 票 (${percent}%)</div>
		            <div class="results-bar">
		                <div class="results-fill" style="width: ${percent}%"></div>
		            </div>
		        `;
		    });
		    
		    document.getElementById('voteResults').innerHTML = html;
		}
		// 留言板功能
		function submitMessage(event) {
		    event.preventDefault();
		    
		    const author = document.getElementById('author').value;
		    const content = document.getElementById('message').value;
		    
		    const newMessage = {
		        author: author,
		        content: content,
		        time: new Date().toLocaleString()
		    };
		    
		    messages.unshift(newMessage);
		    localStorage.setItem('messages', JSON.stringify(messages));
		    
		    renderMessages();
		    event.target.reset();
		}
		
		function renderMessages() {
		    const container = document.getElementById('messagesContainer');
		    container.innerHTML = messages.map(msg => `
		        <div class="message-item">
		            <div class="message-author">${msg.author}</div>
		            <div class="message-content">${msg.content}</div>
		            <div class="message-time" style="color:#666; font-size:0.9em">${msg.time}</div>
		        </div>
		    `).join('');
		}
		
		// 初始化加载数据
		window.onload = function() {
		    updateResults();
		    renderMessages();
		}
		
		
		
		</script>

</html>